<template>
    <div>
        <h1>口算1</h1>
        <el-form label-width="100px">
            <el-form-item label="结果：">
                <el-input-number v-model="product" :min="1" :max="10000" :step="1" ></el-input-number>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="changeQues">换一组题</el-button>
            </el-form-item>
        </el-form>
        <div style="padding:10px 10px">

            <div style="font-size: 30px;">
                <div v-for="(ques, index) in quesArr" style="margin-bottom: 5px;" :key="index">
                    <span>{{ques.x}}</span>&nbsp;{{ques.symbol}}&nbsp;<el-input v-model="ques.y" style="width:100px;font-size: 30px;" ></el-input>&nbsp;=&nbsp;{{ques.r}}
                    <span style="margin-left: 5px;" v-show="showAnswer">
                        答案：{{ques.answer}} &nbsp;
                        <i v-if="ques.y == ques.answer" class="el-icon-check" style="color:green"></i>
                        <i v-else class="el-icon-close" style="color:red"></i>
                    </span>
                    <el-button type="primary" @click="addToLib(ques)">{{ques.added ? '已加' : '加入题库'}}</el-button>
                </div>
                <div v-if="quesArr.length == 0">
                    无题
                </div>
            </div>
        </div>
        <div>
            <el-button type="primary" @click="submitAnswer">提交答案</el-button>
        </div>
    </div>
</template>

<script>
    import util from "@/util/util";

    export default {
        name: "oral1.vue",
        data() {
            return {
                product: parseInt(Math.random() * 100 + 1),
                quesArr: [],
                showAnswer: false,
            }
        },
        methods: {
            addToLib(ques) {
                let quesDesc = ques.x + ques.symbol + "__=" + ques.r
                let ques2 = {
                    desc: quesDesc
                }
                util.addToLib(ques2)
                this.$set(ques, 'added', true)
            },
            changeQues() {
                this.showAnswer = false
                let quesArr = []
                let r = this.product
                const factors = number => Array
                    .from(Array(number + 1), (_, i) => i)
                    .filter(i => number % i === 0 && i != number && i != 1)
                let factorArr = factors(r)
                factorArr.sort(() => Math.random() - 0.5)
                let size = Math.min(factorArr.length, 10)
                for(let i = 0; i < size; i++) {
                    // console.log('factorArr:', factorArr)
                    let ques = {
                        x: factorArr[i],
                        symbol: '✖',
                        y: null,
                        r: r,
                        answer: r / factorArr[i],
                    }
                    quesArr.push(ques)
                }
                this.quesArr = quesArr
            },
            submitAnswer() {
                this.showAnswer = true
            },
        },
        mounted() {
            do {
                this.product = parseInt(Math.random() * 100 + 10)
                this.changeQues()
            } while(this.quesArr.length == 0)
        }
    }
</script>

<style  scoped>
</style>
